<template>
    <div class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
<!--                <a-form-item label="用户名" v-bind="formItemLayout">-->
<!--                    <a-input placeholder='请输入用户名' style="width: 500px;"-->
<!--                             v-decorator="['loginName',{rules: [{ required: true, message: '用户名称不能为空!' },-->
<!--                             {pattern:/^[A-Za-z0-9]{4,16}$/, message: '由4~16位数字、字母组成'}]}]"/>-->
<!--                    <div class="default_tips">* 默认登录密码为 666666, 初次登录后请尽快修改</div>-->
<!--                </a-form-item>-->
                <a-form-item label="手机号" v-bind="formItemLayout">
                    <a-input placeholder="请输入手机号" style="width: 500px;"
                             v-decorator="['phone',{rules: [{ required: true, message: '手机号不能为空!' },
                             {pattern :/^1(3|4|5|7|8)\d{9}$/, message: '手机号格式错误！'}]}]"/>
                </a-form-item>
                <a-form-item label="姓名" v-bind="formItemLayout">
                    <a-input placeholder='请输入用姓名' v-decorator="['name',{rules: [{ required: true, message: '姓名不能为空!' }]}]" style="width: 500px;"/>
                </a-form-item>
                <a-form-item :wrapperCol="{span:18,offset: 5}">
                    <a-button type='primary' :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {saveRider,getRider} from "../../api/user";
    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                params:{
                    id:0,
                },
                bntLoading:false,
                model:{}
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:18 },
                } : {}
            },
        },
        methods:{
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let resp = await saveRider({...this.model,...data,loginName:data.phone});
                this.spinning = false;
                console.log('---res>',resp)
                if(this.qUtil.validResp(resp)){
                    let _this = this;
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.$router.push({name:'RiderList'});}
                    });
                }else{
                    this.$warning({title:resp.msg || '保存失败',okText:'确定'});
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                if(this.params.id > 0) {
                    let resp = await getRider(this.params.id);
                    console.log('===>', resp)
                    if (this.qUtil.validResp(resp)) {
                        this.model = resp.data;
                        const { name, phone} = resp.data;
                        this.form.setFieldsValue({name, phone});
                    }
                }
            }
        },
        mounted(){
            this.params.id = parseInt(this.$route.query.id) || 0;
            this.onLoad();
        },
    }
</script>